<%--
  Created by IntelliJ IDEA.
  tip: lichengming
  Date: 2017/6/14
  Time: 下午4:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/resources.jsp" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <title>云商学院模块列表</title>
    <style type="text/css">
        .cfa_item_footer {
            display: flex;
            padding-top: 10px;
        }

        .cfa_op_form {
            padding: 15px 25px 0;
        }
        .module_modify {
            position: absolute;
            top: 5px;
            left: 10px;
        }
        .module_modify a {
            cursor: pointer;
            color: #69716e;
            font-size: 15px;
        }

        .module_publish {
            position: absolute;
            top: 5px;
            right: 10px;
        }

        .module_publish a {
            cursor: pointer;
            color: #f44336;
            font-size: 15px;
        }

        #cloudModule {
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
        }
        .module_item {
            width: 30%;
            margin-right: 20px;
        }
        .media-heading {
            font-size: 18px;
        }

        .crate_time {
            flex: 1;
            text-align: right;
            color: #7b7272;
            font-size: 14px;
        }
    </style>
    <style type="text/css">
        .ems_add_gbtn {
            flex: auto;
            display: flex;
            justify-content: flex-end;
        }

        .ems_add_heading {
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 5px 10px;
        }
        .ems_form_reset {
            margin-left: 10px;
        }

        .choose-banners {
            position: relative;
            padding: 25px 15px 15px;
            margin: 15px 0;
            background-color: #fafafa;
            box-shadow: inset 0 3px 6px rgba(0, 0, 0, .05);
            border-color: #e5e5e5 #eee #eee;
            border-style: solid;
            border-width: 1px 0;
        }
        .uploader-list {
            width: 100%;
            overflow: hidden;
        }

        .uploader-banners .thumbnail {
            /*width: 110px;*/
            /*height: 110px;*/
        }
        .file-item {
            float: left;
            position: relative;
            margin: 0 20px 20px 0;
            padding: 4px;
        }

        .file-item .info {
            position: absolute;
            left: 4px;
            bottom: 4px;
            right: 4px;
            height: 20px;
            line-height: 20px;
            text-indent: 5px;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 12px;
            z-index: 10;
        }
        .file-item .error {
            position: absolute;
            top: 4px;
            left: 4px;
            right: 4px;
            background: red;
            color: white;
            text-align: center;
            height: 20px;
            font-size: 14px;
            line-height: 23px;
        }


        .file-item .success {
            position: absolute;
            top: 4px;
            left: 4px;
            right: 4px;
            height: 20px;
            line-height: 20px;
            text-indent: 5px;
            background: rgba(63, 117, 4, 0.88);
            color: white;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 12px;
            z-index: 10;
        }

        .icon-remove {
            position: absolute;
            right: 6px;
            top: 6px;
            cursor: pointer;
            color: white;
            z-index: 10000;
        }

        .ke-container ke-container-default {
            width: 100%;
        }
        .kindeditor-wrap {
            margin-left: 10px;
            margin-right: 10px;
        }
        .notice {
            font-size: 14px;
            color: #a59d9f;
        }
        .search_result img {
            height: 72px;
            width: 72px;
            border-radius: 72px;
        }
        .search_user_info {
            text-align: center;
            float: left;
            padding: 10px;
            cursor: pointer;
        }
        .search_user_info_select {
            background-color: rgba(244, 239, 138, 0.4);
        }
        .search_user_info p {
            margin-top: 5px;
            margin-bottom: 0;
        }
        .share_edit_img {
            height: 100%;
        }

        .ems_edit_content {
            width: 100%;
        }

    </style>
    <link rel="stylesheet" type="text/css" href="/ems/plugins/webuploader/webuploader.css">
    <script type="text/javascript" src="/ems/plugins/webuploader/webuploader.js"></script>
</head>
<body>
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">首页视频地址配置</h3>
    </div>
    <div class="panel-body">
        <div class="form-group">
            <label class="col-sm-2 control-label">首页视频地址：</label>
            <div class="col-sm-7">
                <input type="text" id="video_url" value="${config.video_url}" class="form-control" placeholder="可先将视频上传至优酷，再填写优酷视频播放地址" required maxlength="64">
            </div>
            <label class="col-sm-3 control-label">
                <button type="button" id="save_video_url" class="btn btn-primary"><span class="glyphicon glyphicon-check"></span> 保存</button>
            </label>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">视频封面图：</label>
            <div class="col-sm-7">
                <!--dom结构部分-->
                <div class="uploader-banners" class="choose-banners">
                    <!--用来存放item-->
                    <div id="iconList" class="uploader-list">
                        <c:if test="${not empty config.id}">
                            <div id="WU_FILE_0" class="file-item thumbnail">
                                <img class="share_edit_img" src="${config.video_image}" style="height: 100px;">
                                <span class="icon-remove"><i class="glyphicon glyphicon-remove-circle"></i></span>
                            </div>
                        </c:if>
                    </div>
                    <p style="font-size: 14px;color: #8a7974">请上传规格为750px * 360px的图片</p>
                    <div id="iconPicker" class="webuploader-container">选择图片</div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">云商学院模块列表</h3>
    </div>
    <div class="form-inline cfa_op_form" role="form">
        <button type="button" id="module_add" class="btn btn-outline btn-success">
            <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
            添加
        </button>
        <%--<button type="button" id="cfa_delete" class="btn btn-outline btn-danger">--%>
            <%--<i class="glyphicon glyphicon-trash" aria-hidden="true"></i>--%>
            <%--删除--%>
        <%--</button>--%>
    </div>
    <div class="panel-body cfa_list">
        <div class="panel panel-default cfa_item_list">
            <div class="panel-heading">
                <h3 class="panel-title">云商学院模块列表</h3>
            </div>
            <div class="panel-body" id="cloudModule">
                <c:forEach items="${cloudModuleList}" var="cloudModule">
                    <div class="panel panel-default module_item">
                        <div class="panel-body" style="position: relative;padding-top: 30px;">
                            <div class="media" cfaid="${cloudModule.id}">
                                <div class="media-left">
                                    <a href="detail?id=${cloudModule.id}">
                                        <img class="media-object" src="${cloudModule.icon}" style="width: 64px; height: 64px;">
                                    </a>
                                </div>
                                <div class="media-body">
                                    <h5 class="media-heading">${cloudModule.title}</h5>
                                </div>
                                <div class="cfa_item_footer">
                                    <div class="crate_time">${cloudModule.create_time}</div>
                                </div>
                                <div class="module_modify">
                                    <a id="${cloudModule.id}" href="/ems/cloudcollege/edit?id=${cloudModule.id}">编辑</a>
                                </div>
                                <c:if test="${cloudModule.status == 0}">
                                    <div class="module_publish">
                                        <a class="module_pub" mid="${cloudModule.id}">发布</a>
                                    </div>
                                </c:if>
                            </div>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>
    </div>
</div>
<script>

    var icon = "";
    function removeShareImage($target) {
        $target.parent().remove();
        icon = "";
    }
    jQuery(function() {
        var $ = jQuery,
            $list = $('#iconList'),
            ratio = window.devicePixelRatio || 1,
            thumbnailWidth = 100 * ratio,
            thumbnailHeight = 100 * ratio,

            uploader;

        uploader = WebUploader.create({

            auto: true,
            fileNumLimit:1,
            swf: '/ems/plugins/webuploader/Uploader.swf',
            server: '/ems/upload/fupload',
            pick: '#iconPicker',
            accept: {
                title: 'Images',
                extensions: 'jpg,jpeg,png',
                mimeTypes: 'image/jpg,image/jpeg,image/png'
            },
        });

        uploader.on( 'fileQueued', function( file ) {
            var $li = $(
                    '<div id="' + file.id + '" class="file-item thumbnail" style="width: 110px;height: 110px;">' +
                    '<img>' +
                    '<div class="info">' + file.name + '</div>' +
                    '<span class="icon-remove"><i class="glyphicon glyphicon-remove-circle"></i></span>' +
                    '</div>'
                ),
                $img = $li.find('img');

            $list.append( $li );
            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $img.replaceWith('<span>无法生成缩略图</span>');
                    return;
                }

                $img.attr( 'src', src );
            }, thumbnailWidth, thumbnailHeight );

            $(".icon-remove").on("click",function () {
                removeShareImage($(this))
            })
        });


        uploader.on( 'uploadSuccess', function(file,resp) {
            $( '#'+file.id ).addClass('upload-state-done');
            var $li = $( '#'+file.id ),
                $succeed = $li.find('div.success');

            if ( !$succeed.length ) {
                $succeed = $('<div class="success">上传成功</div>').appendTo( $li );
            }
            icon = resp.url;
        });

        uploader.on( 'uploadError', function( file ) {
            var $li = $( '#'+file.id ),
                $error = $li.find('div.error');

            if ( !$error.length ) {
                $error = $('<div class="error"></div>').appendTo( $li );
            }

            $error.text('上传失败');
        });

        uploader.on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.progress').remove();
        });
    });
</script>
<script>
    $(function () {
        //添加
        $("#module_add").on("click",function () {
            window.location.href = "/ems/cloudcollege/edit"
        });

        $(".module_pub").on("click",function (event) {
            var id = $(this).attr("mid");
            var $that = $(this);
            $.confirmAlert("确定要发布该模块吗？",function(){
                $.ajax({
                    data:{id:id},
                    type:"POST",
                    url:"/ems/cloudcollege/publish",
                    success:function(resp) {
                        if (resp.status == "000") {
                            $.toast("发布成功",function () {
                                $that.parent().remove();
                            });
                        }else {
                            $.toast("发布失败","cancel");
                        }
                    }
                });
            });
        });
        $("#save_video_url").on("click",function () {
            var video_url = $.trim($("#video_url").val());
            if (video_url == "") {
                $.errorAlert("请先填写视频地址");
                return;
            }

            if (icon == "") {
                $.errorAlert("请先上传视频封面");
                return;
            }
            $.emsAjax({
                type:"POST",
                data:{video_url:video_url,video_image:icon},
                url:"/ems/cloudcollege/videoSave",
                success:function (resp) {
                    if (resp.status == "000") {
                        $.toast("保存成功");
                    }else {
                        $.toast("保存失败","cancel");
                    }
                }
            })
        })

        $(".icon-remove").on("click",function () {
            removeShareImage($(this));
        });

        if ("${config.id}") {
            icon = "${config.video_image}";
        }
    })
</script>
</body>
</html>